<template>
  <div>
  <el-card>
    <div v-show="showsearch==0">
    <el-button
          type="primary"
          icon="el-icon-search"
          @click="searchCate(1)"
          >一级类别商品</el-button
    >
    <el-button
          type="primary"
          icon="el-icon-search"
          @click="searchCate(2)"
          >二级类别商品</el-button
    >
    </div>
    <div v-show="showsearch==1">
      <el-select v-model="value1" placeholder="请选择">
        <el-option
          v-for="item in option1"
          :key="item.id"
          :label="item.name"
          :value="item.id">
        </el-option>
      </el-select>
      <el-button @click="searchGood(value1)">搜索商品</el-button>
      <el-button @click="showsearch = 0">取消</el-button>
    </div>
    <div v-show="showsearch==2">
      <el-cascader
        v-model="value2"
        :options="option2"
        :props="optionProps"></el-cascader>
      <el-button @click="searchGood(value2[1])">搜索商品</el-button>
      <el-button @click="showsearch = 0">取消</el-button>
    </div>
  </el-card>
  <el-table
    :data="List"
    border
    style="width: 100%">
    <el-table-column
      fixed
      prop="gid"
      label="商品编号"
      >
    </el-table-column>
    <el-table-column
      prop="gname"
      label="商品名称"
      >
    </el-table-column>
    <el-table-column
      prop="gprice"
      label="商品价格"
      >
    </el-table-column>
    <el-table-column
      label="商品信息"
      show-overflow-tooltip
      >
      <template slot-scope="scope">
        <div  style="height:100px;width:100px ;" v-html="scope.row.ginfo"></div>
      </template>
    </el-table-column>
    <el-table-column
      prop="gstate"
      label="商品状态"
     >
     <template slot-scope="scope">
            <span>{{
              scope.row.gstate == "0"
                ? "冻结"
                : scope.row.gstate == "1"
                ? "在售"
                : "下架"
            }}</span>
          </template>
    </el-table-column>
    <el-table-column
    width=180px
      prop="gstorage"
      label="商品数量"
      >
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      >
      <template slot-scope="scope">
        <div v-if="scope.row.gstate=='1'">
          <el-button @click="handleClick(scope.row,'0')" type="text" size="small">冻结</el-button>
          <el-button @click="handleClick(scope.row,'2')" type="text" size="small">下架</el-button>
        </div>
        <div v-if="scope.row.gstate=='2'">
          <el-button @click="searchBuyer(scope.row)" type="text" size="small">查看订单详情</el-button>
        </div>
      </template>
    </el-table-column>
  </el-table>
  </div>
</template>
<script>
  import {mapGetters} from 'vuex'
  
export default {
    inject:['reload'],
    name:'MyGoods',
    data(){
        return{
          Visiable:false,
          currentPage:1,
          totalCount:0,
          PageSizes:[10,20,30,40],
          PageSize:10,
          showsearch:0,
          option1:[],
          option2:[],
          options:[],
          value1:null,
          value2:[],
          optionProps:{
              value:'id',
              label:'name',
              children:'children'
          },
        }
    },
    methods:{
      searchCate(index){
        this.showsearch=index
      },
       async handleClick(row,number){
        const gstate=number;
        const gid=row.gid;
        await this.$store.dispatch("gstateUpdate",{gstate,gid});
        this.reload()
      },
      searchBuyer(row){
        const gid=row.gid;
        const newWin = this.$router.resolve({
            name:'odl',
            query:{
              gid:gid
            }
        });
        const iWidth = 600;                         //弹出窗口的宽度;
        const iHeight = 600;                        //弹出窗口的高度;
        const iTop = (window.screen.height - 30 - iHeight) / 2;       //获得窗口的垂直位置;
        const iLeft = (window.screen.width - 30 - iWidth) / 2;        //获得窗口的水平位置  
        window.open(newWin.href,'odl', 
                'height=' + iHeight 
                + ',innerHeight=' + iHeight 
                + ',width=' + iWidth 
                + ',innerWidth=' + iWidth 
                + ',top=' + iTop 
                + ',left=' + iLeft 
                + ',toolbar=no,menubar=no,scrollbars=auto,resizable=no,location=no,status=no');
      },
      searchGood(num){
        //console.log(num)
        this.$axios.get("/api/goodpage",{
                params:{
                    pageNum:this.currentPage,
                    pageSize:this.PageSize,
                    keyword:'',
                    Type:'all',
                    level:num
                }}).then(res =>{
                  //console.log(res.data)
                  if(res.data.code==200){
                    this.totalCount=res.data.data.gtotal
                    this.$store.dispatch("searchGoods",res.data.data.glist)
                    alert("搜索成功")
                  }else{
                    alert(res.data.msg)
                  }    
                }).catch(error =>{
                 // console.log('提交失败')
                  //console.log(error )
                })
      },
      async getOptions(){
        await this.$axios.get('/api/axeTypes').then(res =>{
                this.options=res.data.data
                //console.log(this.options)
              }).catch(error =>{
               // console.log('提交失败')
                //console.log(error )
              })
       },
    },
    computed:{
      ...mapGetters(["gList"]),
      List(){
        const  lt= JSON.parse(JSON.stringify(this.gList));
        return lt
      }
    },
    mounted(){
      this.$store.dispatch("goodsListInfo")
      this.getOptions()
      setTimeout(()=>{
        let a = 1
        for(a=0;a<this.options.length;a++){
          let b={}
         b.id=this.options[a].level1.id
         b.name=this.options[a].level1.name
         b.level=this.options[a].level1.level
         b.dadId=this.options[a].level1.dadId
         this.option1.push(b)
          b.children=this.options[a].level2s
          this.option2.push(b)
        }
        //console.log(this.option1)
      },800)
    }
}
</script>
<style>

</style>
